<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
	<style type="text/css">
        .del{
            border: 1px green solid;
        }
    </style>
</head>
<body>
	<table id ="user">
	</table>

	<script type="text/javascript">
	$(function(){
		var data = [];
		var getuser= $.ajax({
			type:"GET",
			url:"http://localhost:3000/users",
			dataType:"json"
		})
		.done(function(msg){
			data = msg;
			showMatchAddr(data);
		});

		function showMatchAddr(list){
			list.forEach((item, index)=>{
				$("<tr></tr>").appendTo($("#user"));
				$("<td></td>").appendTo($("tr").eq(index)).text(item.id);
				$("<td></td>").appendTo($("tr").eq(index)).text(item.name);
				$("<td></td>").appendTo($("tr").eq(index)).text(item.age);
				$("<button></button>").appendTo($("tr").eq(index)).text("del").addClass("del");
			});
			addListener();
		};

		function addListener(){
			for(let i = 0; i < data.length; i++){
				$("button").eq(i).on("click", function(){
					delUser(i);
				});
			}
		};

		function delUser(index){
			var id = data[index].id;
			data.splice(index, 1);
			$.ajax({
				type:"DELETE",
				url:"http://localhost:3000/users/" + id,
				dataType:"json"
			})
			.done(function(msg){
				showMatchAddr(data);
			});

			//��ձ�
			$("#user").empty();
		};
	});
	</script>
</body>
</html>